import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';

import { PageHeader } from '../components/page-header';
import { Content, PageTitle } from '../components/content';
import { PageFooter } from '../components/page-footer';
import { Book } from './components/books.api';

import * as Sys from '../sys';
import * as SysApi from '../sys.api';

import * as BooksApi from './components/books.api';
import * as SysBom from '../sys.bom';
import { Form, FormFields } from '../components/forms';
import { TextLiteral } from '../components/text-box';
import { ModifyButton, BackButton } from '../components/buttons';

BooksApi.register();

const bookId = SysBom.parseSearch()['book-id'] || 0;

interface IApp {
    data: Book,
}

export class App extends React.Component<{}, IApp> {
    constructor(props: {}) {
        super(props);

        this.state = {
            data: null,
        };
    }

    componentDidMount = () => {
        SysApi.call('books.queryById', bookId)
            .then(data => this.setState({ data }));
    };

    private handleModifyClick = () => {
        SysBom.jumpTo('edit-detail?book-id=' + bookId);
    };

    render(): JSX.Element {
        const { data } = this.state;
        return <>
            <PageHeader current={20} />
            <Content>
                <PageTitle>Book: {bookId}</PageTitle>
                {!data ?
                    <div className="ui placeholder">
                        <div className="line" />
                        <div className="line" />
                        <div className="line" />
                        <div className="short line" />
                        <div className="short line" />
                    </div>
                    : <>
                        <Form>
                            <FormFields>
                                <TextLiteral className="six wide field" labelText='类别：' value={BooksApi.formatBookCategory(data.category)} />
                                <TextLiteral className="six wide field" labelText='价格：' value={Sys.formatNumber(data.price, 2)} />
                                <TextLiteral className="four wide field" labelText='数量：' value={Sys.formatNumber(data.amount)} />
                            </FormFields>
                            <FormFields>
                                <TextLiteral className="twelve wide field" labelText='标题：' value={data.title} />
                                <TextLiteral className="four wide field" labelText='作者：' value={data.author} />
                            </FormFields>
                            <FormFields>
                                <TextLiteral className="six wide field" labelText='出版日期：' value={Sys.formatDate(data.pubDate)} />
                                <TextLiteral className="field" labelText='是否推荐：' value={Sys.formatBool(data.star)} />
                            </FormFields>
                        </Form>
                        <ModifyButton onClick={this.handleModifyClick} className="ui primary button" />
                    </>
                }
            </Content>
            <PageFooter />
        </>
    }
};

if (bookId > 0) {
    Sys.ready(() => ReactDOM.render(<App />, document.getElementById('root')!));
}